import { Modal, Form, Button, Input, Select } from 'antd';
import React from 'react';

const FormItem = Form.Item;

const doCancel = ({
  visible,
  showCancel,
  confirmCancel,
  form: {
    getFieldDecorator,
    validateFieldsAndScroll,
    getFieldValue,
    setFieldsValue
  }
}) => {
  const handleCancel = () => {
    showCancel(false);
  };
  const handleOk = (e) => {
    e.preventDefault();
    validateFieldsAndScroll((err, values) => {
      if (!err) {
        Modal.confirm({
          title: '确定吗',
          content: '你确定要取消该合同吗？',
          onOk() {
            confirmCancel(values.num);
          },
          onCancel() {

          }
        })
      }
    })
  };

  return (
    <Form >
      <Modal
        visible={visible}
        title="合同取消"
        onOk={handleOk}
        onCancel={handleCancel}
        width={300}
        destroyOnClose={true}
        footer={[
          <Button key="back" onClick={handleCancel}>取消</Button>,
          <Button key="submit" type="primary" htmlType="submit" onClick={handleOk} >
            确认
            </Button>,
        ]}>
        <FormItem
          label="合同单号"
          labelCol={{ span: 7 }}
          wrapperCol={{ span: 15 }}
        >
          {getFieldDecorator('num', {
            rules: [
              { required: true, message: '请输入合同单号以确认' },
              { whitespace: true }
            ],
            initialValue: "",
            validateTrigger: "onSubmit"
          })(
            <Input />
          )}
        </FormItem>
      </Modal>
    </Form>
  );
};
export default Form.create()(doCancel);
